<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
</head>
<body>
	<div id="app">
		<div
			style="transform: translate(150px,100px);" 
			v-swiper.swiper.x.tap.resis="swiper" data-maxleft='100' data-maxright='100'>{{name}}</div>
	</div>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="vue.js"></script>
	<script>
		
		Vue.directive('swiper', {
		  	bind: function (el, binding, vnode) {
		    	var This = $(el);
		    	var startX,
		    		startY,
		    		endX,
		    		endY,
		    		time,
		    		unit = el.dataset.unit||'px';
		    	var ex = 0,//每次触发事件的初始xy
		    		ey = 0;
	    		//弹性
	    		var resisX = 0,
	    			resisY = 0;
		    	This.on('touchstart',function(e){
		    		init();
		    		e.preventDefault(); 
		    		startX = e.originalEvent.targetTouches[0].pageX;
		    		startY = e.originalEvent.targetTouches[0].pageY;
		    		time = new Date().getTime();
		    		if(This[0].style['transform']){
		    			var reg = new RegExp(`translate\\(([\\w\\W]+)${unit},\\s([\\w\\W]+)${unit}`)
		    			var arr = reg.exec(This[0].style['transform']);
		    			ex = parseFloat(arr[1]);
		    			ey = parseFloat(arr[2]);
		    		}
		    	});
		    	This.on('touchmove',function(e){
		    		e.preventDefault(); 
		    		endX = e.originalEvent.changedTouches[0].pageX;
		    		endY = e.originalEvent.changedTouches[0].pageY;
					var obj = {
						diffX:binding.modifiers.x?(endX-startX):0,
						diffY:binding.modifiers.y?(endY-startY):0
					}
					if(binding.modifiers.swiper){
						if(binding.modifiers.resis){//弹性resisX
							translate(This[0],obj.diffX+ex,obj.diffY+ey);
							console.log(obj.diffX)
							if(el.dataset.maxleft&&-parseInt(el.dataset.maxleft)>obj.diffX){
								resisX = Math.abs(obj.diffX+parseInt(el.dataset.maxleft))
								console.log('1-----'+resisX)
							}
							if(el.dataset.maxright&&el.dataset.maxright<obj.diffX){
								resisX = el.dataset.maxright*1
								console.log('2-----'+resisX)
							}
						}else{
							if(el.dataset.maxleft&&-el.dataset.maxleft>obj.diffX){
								obj.diffX = -el.dataset.maxleft
							}
							if(el.dataset.maxright&&el.dataset.maxright<obj.diffX){
								obj.diffX = el.dataset.maxright*1
							}
		    				translate(This[0],obj.diffX+ex,obj.diffY+ey);
						}
					}
    				binding.value.touchmove&&binding.value.touchmove(obj)
		    	});
		    	This.on('touchend',function(e){
		    		e.preventDefault(); 
		    		endX = e.originalEvent.changedTouches[0].pageX;
		    		endY = e.originalEvent.changedTouches[0].pageY;
					var obj = {
						diffX:binding.modifiers.x?(endX-startX):0,
						diffY:binding.modifiers.y?(endY-startY):0
					}
					if(el.dataset.maxleft||el.dataset.maxright){//修改限制范围的dataset
						if(This[0].style['transform']){
							var reg = new RegExp(`translate\\(([\\w\\W]+)${unit},\\s([\\w\\W]+)${unit}`)
							var arr = reg.exec(This[0].style['transform']);
						}
						if(binding.modifiers.resis&&Math.abs(resisX)>0){//弹性
							This[0].style.transition='transform .5s';
							translate(This[0],parseInt(arr[1])+resisX,obj.diffY+ey);
							setTimeout(function(){
								This[0].style.transition='none';
							},500)
						}else{
							if(el.dataset.maxleft){
								el.dataset.maxleft = parseInt(el.dataset.maxleft) - (ex-parseInt(arr[1]));
							}
							if(el.dataset.maxright){
								el.dataset.maxright = parseInt(el.dataset.maxright) + (ex-parseInt(arr[1]));
							}
						}
					}
					time = new Date().getTime() - time;
					if(binding.modifiers.tap){//处理tap
						isTap()&&binding.value.tap&&binding.value.tap(obj)
					}
		    	});

		    	function init(){
		    		resisX = 0;
	    			resisY = 0;
		    	}
		    	function isTap() {
		    	    return time < 150 && Math.abs(endX-startX) < 2 && Math.abs(endY-startY) < 2;
		    	}
	    		function translate(element,x,y) {
	    	        element.style['transform'] = `translate(${x}${unit},${y}${unit})`;
	    	    }
		  	}
		})
		var app = new Vue({
			el:'#app',
			data:{
				name:111,
				swiper:{
					touchmove:function(e){
						console.log('touchmove')
						console.log(e)
					},
					tap:function(e){
						console.log('tap')
						console.log(e)
					}
				}
			},
			methods:{
			}
		})
	</script>
</body>
</html>